<template>
  <el-sub-menu
    v-if="route.children && route.children.length"
    :index="route.meta.path || route.path"
  >
    <template #title>
      <span>{{ route.meta[local] }}</span>
    </template>
    <MenuItem v-for="(item,index) in route.children" :key="index" :route="item" />
  </el-sub-menu>
  <el-menu-item :index="route.meta.path || route.path" v-else>
    {{ route.meta[local] }}
  </el-menu-item>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "MenuItem",
  props: {
    route: {
      type: Object,
      default: () => {},
    },
  },
  setup(prop, context) {
    // console.log(prop.route);
  },
  computed:{
    local():string{
      const { $store }: any = this;
      return $store.state.currentLanguage;
    }
  }
});
</script>
<style scoped lang="scss">
</style>